<LayoutTableSmall>
    <!-- 顶部 -->
    <template slot="top"></template>
    <!-- 其他 -->
    <template slot="other"></template>
    <!-- 搜索 -->
    <template slot="search">

        <el-form :inline="true" label-position="left" label-width="80px" :model="mixinTable_tableSearchData"
            @submit.native.prevent class="demo-form-inline">
            <el-form-item>
                <el-select v-model="mixinTable_tableSearchData.status" @change="mixinTable_searchData" style="width:100px"
                    placeholder="活动状态" clearable>
                    <el-option label="已开始" value="1"></el-option>
                    <el-option label="已结束" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input clearable v-model="mixinTable_tableSearchData.title" placeholder="请输入标题名称"
                    @change="mixinTable_searchData" style="width:200px">
                    <el-button slot="append" icon="el-icon-search" @click="mixinTable_searchData()"></el-button>
                </el-input>
            </el-form-item>
        </el-form>
    </template>
    <!-- 功能 -->
    <template slot="function">
        <el-button type="primary" @click="editBoxOpen({type:'add'})">新增活动</el-button>
    </template>
    <!-- 表格 -->
    
    <template slot="table">
        <el-table :data="mixinTable_tableData" v-loading="mixinTable_loading"  border style="width: 100%;" :ref="mixinPage_vueName+'TableSmall'"
            height="100%" @selection-change="mixinTable_handleSelectionChangeTableSmall">
            <el-table-column type="selection" width="50" align="center"></el-table-column>
            <!-- <el-table-column prop="id" label="活动编号" width="70" align="center">
            </el-table-column> -->
            <el-table-column prop="title" label="活动信息">
                <template slot-scope="scope">
                    <div style="font-weight: 800;">编号：{{ scope.row.id }}</div> 
                    <div>标题：{{ scope.row.title }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="product" label="商品信息">
                <template slot-scope="scope">
                    <div class="product">
                        <div class="albumUrl">
                            <imageBox :src="scope.row.product.albumUrl"></imageBox>
                        </div>
                        <div class="information">
                            <div class="title">{{ scope.row.product.name }}</div>
                            <div class="">
                                <span>销售价:{{ scope.row.product.salePrice }}</span> 
                                <span> 库存:{{ scope.row.stock }}</span> 
                            </div>
                        </div> 
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="拼团时间" align="center">
                <template slot-scope="scope">
                    {{scope.row.start_time}}至{{scope.row.end_time}}
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="100">
                <template slot-scope="scope">
                    <!-- <div v-show="scope.row.status == 0">未开始</div>
                    <div v-show="scope.row.status == 1">已开始</div>
                    <div v-show="scope.row.status == 2">已关闭</div> -->
                    <StateIcon :type="scope.row.status == 2 ? 'error':'success'"></StateIcon>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="400">
                <template slot-scope="scope">
                    <el-table :data="scope.row.situation" border :ref="mixinPage_vueName+'TableSmall'" :show-header="false" style="width: 100%;height: 100%;"
                        @selection-change="mixinTable_handleSelectionChangeTableSmall">
                        <el-table-column prop="member_number" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.member_number }}人团
                            </template>
                        </el-table-column>
                        <el-table-column prop="active_time" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.active_time }}小时
                            </template>
                        </el-table-column>
                        <el-table-column prop="all_team_situation_count" align="center">
                            <template slot-scope="scope">
                                已开团:{{ scope.row.all_team_situation_count }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="status">
                            <template slot-scope="scope">
                                <span v-show="scope.row.status == 0">未开启</span>
                                <span v-show="scope.row.status == 2">已结束</span>
                                <el-button type="text" plain v-show="scope.row.status == 1" @click="finishLevel(scope.row.id)" >手动结束</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="210">
                <template slot-scope="scope">

                    <el-tooltip ceffect="dark" content="编辑" placement="top" >
                        <el-button @click="editBoxOpen({type:'update',id:scope.row.id})" icon="el-icon-edit" circle>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip ceffect="dark" content="开团列表" placement="top" >
                        <el-button @click="viewList({type:'update',id:scope.row.id})" icon="el-icon-link" circle>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip ceffect="dark" content="库存明细" placement="top" >
                        <el-button @click="inventory({id: scope.row.id})" icon="el-icon-tickets" circle>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip ceffect="dark" content="推广" placement="top" style="padding-left: 10px;">
                        <el-popover placement="bottom-end" title="" trigger="click"
                                @show="showCode(scope.row.id)">
                                <ShareQrcodeBox
                                                :ref="'shareQrcodeBox'+scope.row.id" 
                                                :appWindow="appWindow">
                                </ShareQrcodeBox>
                                <el-button slot="reference" icon="el-icon-s-promotion" circle></el-button>
                        </el-popover>
                     </el-tooltip>
                 
                </template>
            </el-table-column>

        </el-table>

    </template>
    <!-- 表格选项 -->
    <!-- <template slot="options">
        <el-button :disabled="mixinTable_selectTableData.length<=0" @click="mixinTable_selectTableDeleteData()">
            停用已选</el-button>
        <el-button :disabled="mixinTable_selectTableData.length<=0"
            @click="mixinTable_clearSelectionChangeTableSmall()">取消选择
        </el-button>
    </template> -->
    <!-- 分页 -->
    <template slot="page">
        <el-pagination class="paginationStyle" v-if="mixinTable_pageData.total>0" background
            @current-change="mixinTable_pagingData($event)" :current-page="mixinTable_pageData.pageNum"
            :page-size.sync="$vFN.Constants.pageSize" layout="total, prev, pager, next,jumper"
            :total.sync="mixinTable_pageData.total">
        </el-pagination>
    </template>
</LayoutTableSmall>